<template>
  <div class="peer-item-more" @click.stop="">
    <el-dropdown  @command="handleCommand" trigger="click">
      <span class="el-dropdown-link">
        <i class="el-icon-more"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
            v-for="item in dropdownOptions"
            :key="item.value"
            :icon="item.icon"
            :command="item.value">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <z-notice :visible.sync="showNotice" v-bind="noticeObject" @ok="ok">
      <div slot="group" class="group-exit" style="width: 100%;margin-bottom: -40px;" v-if="command === 'Exit' && item.currentUser && item.currentUser.type === 0 && !isExit">
        <el-select v-model="value" placeholder="Please Select" style="margin: 24px 0; width: 100%">
          <el-option
              v-for="item in groupUserOptions"
              :disabled="item.userId === $store.state.user.id"
              :key="item.userId"
              :label="item.realName"
              :value="item.userId">
          </el-option>
        </el-select>
        <el-button size="small" type="primary" style="width: 100%" @click="changeRoleExit">Exit</el-button>
        <el-divider>or</el-divider>
      </div>
    </z-notice>
    <group-apply :visible.sync="showGroupApply" :groupId="item.id" @getData="$emit('getData')"></group-apply>
  </div>
</template>

<script>
import ZNotice from '@/components/storybook/z-dialog-notice'
import groupApply from '@/views/modules/mspbots/peerGroup/groupList/groupApply'
export default {
  name: 'listMore',
  props: ['item', 'quickFilter'],
  components: {
    ZNotice,
    groupApply
  },
  data () {
    return {
      command: null,
      showNotice: false,
      showGroupApply: false,
      isExit: true,
      noticeObject: {
        icon: 'icon_message_alt_check',
        title: 'Are you sure you want to exit this group？',
        info: 'You cannot undo this operation. Please double-check before you proceed.',
        okButton: {
          text: 'Confirm',
          type: 'primary'
        },
        closeButton: {
          text: 'Cancel'
        }
      },
      groupUserOptions: [],
      value: ''
    }
  },
  computed: {
    dropdownOptions () {
      let moreArr = [
        { label: 'View Details', value: 'View Details', icon: 'cuifont icon_receipt_search' }
      ]
      if (this.quickFilter === 'public-group' && !this.item.currentUser) {
        moreArr.push({ label: 'Apply to join', value: 'Apply to join', icon: 'cuifont icon_people_add' })
      }
      if (this.item.currentUser && this.item.currentUser.type === 0) {
        moreArr = moreArr.concat([
          { label: 'Edit', value: 'Edit', icon: 'cuifont icon_edit' },
          // { label: 'Benchmark', value: 'Benchmark', icon: 'cuifont icon_target' },
          { label: 'Exit', value: 'Exit', icon: 'cuifont icon_person_arrow_left' },
          { label: 'Delete', value: 'Delete', icon: 'cuifont icon_people_team_delete' }
        ])
      }
      if (this.item.currentUser && this.item.currentUser.type === 1 && this.item.currentUser.status !== 2) {
        moreArr.push({ label: 'Exit', value: 'Exit', icon: 'cuifont icon_person_arrow_left' })
      }
      return moreArr
    }
  },
  methods: {
    handleCommand (command) {
      this.command = command
      if (command === 'View Details') {
        this.goDetail(this.item)
      }
      if (command === 'Delete') {
        this.noticeObject = {
          icon: 'icon_message-alt-error',
          title: 'Are you sure you want to delete this group?',
          info: 'You are about to delete a group and its contents permanently. Please double-check before you continue.',
          okButton: {
            text: 'Confirm',
            type: 'primary'
          },
          closeButton: {
            text: 'Cancel'
          }
        }
        this.showNotice = true
      }
      if (command === 'Exit') {
        this.handleExit()
      }
      if (command === 'Edit') {
        this.goDetail(this.item, 'edit')
      }
      if (command === 'Apply to join') {
        this.showGroupApply = true
      }
    },
    async delete () {
      const params = {
        groupId: this.item.id
      }
      const { deletePeerGroup } = this.$interface.system
      const { data } = await deletePeerGroup(params)
      if (data.code === 0 && data.data) {
        this.$message.success('Success')
        this.$emit('getData')
      } else {
        this.$message.error(data.msg)
      }
    },
    async handleExit () {
      const { checkGroupCaptain, getPeerGroupUser } = this.$interface.system
      let isExit = true
      if (this.item.currentUser && this.item.currentUser.type === 0) {
        const params = {
          groupId: this.item.id,
          userId: this.$store.state.user.id
        }
        const { data } = await checkGroupCaptain(params)
        isExit = data.data
      }
      this.isExit = isExit
      if (this.item.currentUser && this.item.currentUser.type === 0 && !isExit) {
        const params = {
          groupId: this.item.id
        }
        const { data } = await getPeerGroupUser(params)
        this.groupUserOptions = data.data.records
        this.noticeObject = {
          icon: 'icon_message_alt_x',
          iconColor: '#DA1E28FF',
          title: 'You can\'t exit this group yet.',
          info: 'You are the captain of this group. If you wish to exit, hand over the captain role to another member or delete this group.',
          okButton: {
            text: 'Delete',
            type: 'primary'
          },
          closeButton: {
            text: 'Cancel'
          }
        }
      } else {
        this.noticeObject = {
          icon: 'icon_message-alt-error',
          title: 'Are you sure you want to exit this group？',
          info: 'You cannot undo this operation. Please double-check before you proceed.',
          okButton: {
            text: 'Confirm',
            type: 'primary'
          },
          closeButton: {
            text: 'Cancel'
          }
        }
      }
      this.showNotice = true
    },
    ok () {
      if (this.command === 'Delete') {
        this.delete()
      }
      if (this.command === 'Exit') {
        if (this.item.currentUser && this.item.currentUser.type === 0 && !this.isExit) {
          this.delete()
        } else {
          this.exit()
        }
      }
    },
    async changeRoleExit () {
      if (!this.value) {
        return this.$message.info('Please select user')
      }
      const params = {
        groupId: this.item.id,
        userId: this.value,
        type: 0
      }
      const { userRolePeerGroup } = this.$interface.system
      const { data } = await userRolePeerGroup(params)
      if (data.code === 0 && data.data) {
        await this.exit()
      } else {
        this.$message.error(data.msg)
      }
    },
    async exit () {
      const params = {
        groupId: this.item.id,
        userId: this.$store.state.user.id
      }
      const { deletePeerGroupUser } = this.$interface.system
      const { data } = await deletePeerGroupUser(params)
      if (data.code === 0 && data.data) {
        this.$message.success('Success')
        this.$emit('getData')
      } else {
        this.$message.error(data.msg)
      }
    },
    goDetail (item, edit) {
      let query = {
        groupId: item.id,
        name: item.name,
        page: this.quickFilter
      }
      if (edit) {
        query.edit = 'true'
      }
      if (item.currentUser && item.currentUser.hasOwnProperty('type')) {
        query.type = item.currentUser.type
      }
      if (!item.currentUser || (item.currentUser && item.currentUser.status === 2)) {
        query.notInGroup = true
      }
      this.$router.push({ path: '/peerGroupDetail', query: query })
    }
  }
}
</script>

<style scoped lang="scss">
.peer-item-more {
  position: absolute;
  right: 23px;
  top: 15px;
  cursor: pointer;
  i {
    font-size: 16px;
  }
}
</style>
